<template>
    <div class="layerList">
        <span
            @click="addOrRemoveLayer(item)"
            v-for="(item, index) in layerArr"
            :key="index"
            :class="item.isClicked ? 'clicked_class' : ''"
        >
            {{ item.name }}
        </span>
    </div>
</template>

<script>
/* global Cesium */
import layerCtrl from 'U/layerCtrl';
export default {
    name: 'layerCtrl',
    components: {},
    created() {
        this.getLayerArr();
    },
    data() {
        return {
            layerArr: [],
        };
    },
    methods: {
        // 获取配置文件中图层的所有信息
        getLayerArr() {
            let mapServiceConf = layerCtrl.mapServiceConf;
            Object.keys(mapServiceConf).forEach(item => {
                mapServiceConf[item].forEach(itemTwo => {
                    let ele = {
                        name: itemTwo.label, // 图层名称
                        methodName: itemTwo.methodName, // 加载图层的方法名
                        item: itemTwo,
                        isClicked: itemTwo.preloading, // 是否初始化的时候就已经加载了
                    };
                    this.layerArr.push(ele);
                    if (itemTwo.preloading) {
                        this.addLayerToMap(ele);
                    }
                });
            });
        },
        // 初始化加载图层
        addLayerToMap(ele) {
            Cesium.C_layerManager[ele.methodName](ele.item, ele.isClicked, ele.item.index);
        },
        // 添加或者删除图层
        addOrRemoveLayer(ele) {
            Cesium.C_layerManager[ele.methodName](ele.item, !ele.isClicked);
            ele.isClicked = !ele.isClicked;
        },
    },
};
</script>
<style lang="scss">
.layerList {
    position: absolute;
    background-color: rgba(0, 9, 47, 0.9);
    top: 252px;
    left: 70px;
    max-height: 600px;
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    color: rgba(184, 185, 187, 1);
    line-height: 18px;
    overflow-x: hidden;
    z-index: 2;
    width: 150px;
    border-radius: 4px;
    text-align: center;
    span {
        display: block;
        font-size: 12px;
        font-weight: 400;
        color: #b8b9bb;
        height: 36px;
        line-height: 35px;
        cursor: pointer;
        &:not(:first-of-type) {
            border-top: 1px solid rgba(8, 53, 76, 0.2);
        }
        &:hover {
            background-color: #39414a;
        }
        &.clicked_class {
            color: rgb(245, 220, 25);
        }
    }
}
</style>
